<p ng-if="!ctrl.appModel.jsonData.apiKeySet">worldPing requires a Grafana.com account. <a class="highlight-word"
                                                                                          href="//grafana.com/profile/api-keys"
                                                                                          target="_blank">Generate a new
    API key</a> or <a class="highlight-word" href="//grafana.com/signup" target="_blank">sign up for free.</a></p>

<form name="editForm">
    <div class="rt-dash-flex-container wp-warning-box--margin-bottom"
         ng-if="ctrl.appModel.jsonData.apiKeySet && ctrl.datasourceUpgrader.needsUpgrade()">
        <div class="rt-dash-flex-item rt-dash--warning">
            <div class="rt-CTA-item">
                <div class="rt-dashboard-icons-container">
                    <i class="icon-gf icon-gf-alert rt-dashboard-icons-alert"></i>
                </div>
                <div class="rt-dashboard-icons-warning-container">
                    <span>worldPing now supports Grafana Alerting!</span>
                    <span class="rt-dash--warning-subcopy">To start using alerting, an update to your worldPing data source <strong>is required</strong>.</span>
                    <a href="#" class="btn btn-inverse" ng-if="ctrl.datasourceUpgrader.canUpgrade()"
                       ng-click="ctrl.datasourceUpgrader.upgrade()">Update now</a>
                    <div class="rt-dash--warning-subcopy" ng-if="!ctrl.datasourceUpgrader.canUpgrade()">Please contact
                        your admin to have them perform the update.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="gf-form-group">
        <div class="gf-form-inline">
            <div class="gf-form wp-inline-field-margin--right">
                <a class="gf-form-label width-12" href="//grafana.com/profile/api-keys" target="_blank">Grafana.com API
                    Key</a>
                <input type="password" class="gf-form-input input-xlarge" ng-model="ctrl.appModel.secureJsonData.apiKey"
                       ng-if="!ctrl.appModel.jsonData.apiKeySet" required>
                <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="complete"
                       ng-if="ctrl.appModel.jsonData.apiKeySet">
            </div>
            <div class="gf-form">
                <a class="btn btn-danger btn-small" href="#" ng-click="ctrl.reset()"
                   ng-if="ctrl.appModel.jsonData.apiKeySet">reset</a>
            </div>
        </div>
        <div ng-if="ctrl.appModel.jsonData.apiKeySet && ctrl.validKey" class="wp-enabled-box">
            <i class="icon-gf icon-gf-check wp-icon-success"></i> worldPing is enabled. <strong>Next up: </strong><a
                href="dashboard/db/worldping-home" class="external-link">Go to worldPing Home Dashboard</a>
        </div>
        <div ng-if="ctrl.errorMsg">
            <div class="alert alert-error">
                <div class="alert-title ng-binding">Error</div>
                <div>{{ctrl.errorMsg}}</div>
            </div>
        </div>
    </div>
    <div class="gf-form-group" ng-if="ctrl.appModel.jsonData.apiKeySet && ctrl.org">
        <h3 class="page-heading">Account Details</h3>
        <div class="gf-form">
            <span class="gf-form-label width-12">Org Name</span>
            <span class="gf-form-label width-12">{{ctrl.org.name}}</span>
        </div>
        <div class="gf-form">
            <span class="gf-form-label width-12">Org Slug</span>
            <span class="gf-form-label width-12">{{ctrl.org.slug}}</span>
        </div>
        <div class="gf-form">
            <span class="gf-form-label width-12">Org ID</span>
            <span class="gf-form-label width-12">{{ctrl.org.id}}</span>
        </div>
        <div class="gf-form">
            <span class="gf-form-label width-12">Plan</span>
            <span class="gf-form-label width-12">{{ctrl.org.wpPlan || 'Free'}}</span>
        </div>
        <div class="gf-form">
            <span class="gf-form-label width-12">Est. Checks/Mo</span>
            <span class="gf-form-label width-12">{{ctrl.org.strChecksPerMonth}}</span>
        </div>
    </div>
</form>
